<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./js/angular.min.js"></script>
<script type="text/javascript" src="./js/angular-route.js"></script> 
<script type="text/javascript" src="./js/angular-ui-router.js"></script>
<style type="text/css">
a{margin-right:30px;}
</style>
</head>
<body> 
<!-- 参考： https://blog.csdn.net/zcl_love_wx/article/details/52034193--> 
<!-- 传递参数： https://blog.csdn.net/smile_panda/article/details/50976777--> 
<div ng-app="myApp" class="myApp" ng-controller="myAppController">
	<a ng-repeat="x in navlist" ui-sref="{{x.name}}({id:{{x.id}}})">{{x.title}}</a> 
	<a ui-sref="pram({id:22222})">传参</a>
	<div class="myAppBot" ui-view></div>
	<script type="text/ng-template" id='home'>
		<div ng-controller="homeController">
		{{username}}
		</div>
	</script>
	<script type="text/ng-template" id='hot'>
		<div ng-controller="hotController">
		{{username}}
		</div>
	</script>
	<script type="text/ng-template" id='top'>
		{{username}}
	</script>
	<script type="text/ng-template" id='pram'>
		{{username}}
	</script>
</div>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', ['ui.router']);   
myApp.config(["$stateProvider",  function ($stateProvider) {      
    $stateProvider
    .state("/",{
    	url: "/", //定义路由
    	templateUrl:"home",  //定义模板 还有个是 template 
    	controller:"homeController" // 定义控制器
    })
    .state("home",{
        url: '/home', 
        templateUrl:"home",
		controller:"homeController",
    })
    .state("hot",{
        url:'/hot',
        templateUrl :'hot',
        controller:"homeController",
        params:{'id':''}
    })
    .state("top",{
    	url:'/top',
    	templateUrl:'top',
    	controller:"topController",
    	params:{'id':null}
    })
	.state("pram",{
        url:'/pram',
        templateUrl :'pram',
        controller:"pramController",
        params:{'id':null}
    })
;
}]);
myApp.controller('myAppController',['$scope',function($scope){
	$scope.navlist = [
		{title:'首页',name:'home',id:1},
		{title:'热门',name:'hot',id:2},
		{title:'推荐',name:'top',id:3},
	];
}]);
myApp.controller('homeController',['$scope','$stateParams',function($scope,$stateParams){
	$scope.username = "张三";
}]);
myApp.controller('hotController',['$scope','$stateParams',function($scope,$stateParams){
	console.log($stateParams);
	$scope.username = "这里hot控制器";
	// console.log($routeParams);
}]);
myApp.controller('topController',['$scope','$stateParams',function($scope,$stateParams){
	console.log($stateParams);
	$scope.username = "这里top控制器";
}]);
myApp.controller('pramController',['$scope','$stateParams',function($scope,$stateParams){
	console.log($stateParams); 
	$scope.username = "这里pram控制器";
}]);

</script>
</html>